import React, { memo, useEffect, useState } from "react";
import { Swiper, Image, Loading } from "antd-mobile/2x";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { DownFill } from "antd-mobile-icons";
import * as HomeAction from "../../../store/actions/home";
import api from "../../../api";
import BeScroll from "../../../components/loading/index";
import { useHistory } from "react-router-dom";
import { getCurrentCity, setCity } from "../../../api/city";
import "./index.scss";
interface Img {
  imgSrc: string;
  id: number;
  alt: string;
}
interface Group {
  id: number;
  title: string;
  desc: string;
  imgSrc: string;
}
interface Res {
  body: Array<Group>;
  status: number;
  description: string;
}
interface ResNews {
  status: number;
  description: string;
  body: Array<News>;
}
interface News {
  date: string;
  from: string;
  id: number;
  imgSrc: string;
  title: string;
}
const content = [
  {
    icon: "icon-maifang",
    title: "整租",
    path: "/index/room",
  },
  {
    icon: "icon-fabuqiuzu",
    title: "合租",
    path: "/index/room",
  },
  {
    icon: "icon-ditu",
    title: "地图找房",
    path: "/map",
  },
  {
    icon: "icon-zufang",
    title: "去出租",
    path: "/housesAdd",
  },
];

const Home = (props: any) => {
  const [group, setGroup] = useState<Group[]>([]);
  const [news, setNews] = useState<News[]>([]);
  const { getImgList, swipeImg } = props;
  const { push } = useHistory();
  const toCity = () => {
    push("/city");
  };
  const toRoomList = (name: string, path: string) => {
    if (name === "整租" || "合租") {
      let rentType = name === "整租" ? true : false;
      push({
        pathname: path,
        state: {
          rentType,
        },
      });
    } else {
      push(path);
    }
  };
  useEffect(() => {
    api.getGroupList().then((res: Res) => {
      setGroup([...res.body]);
    });
    api.getNewsList().then((res: ResNews) => {
      setNews([...res.body]);
    });
    getImgList();
  }, [getImgList]);
  useEffect(() => {
    getCurrentCity().then((res) => {
      setCity(res);
    });
  }, []);
  return (
    <BeScroll myClass="homeWarp">
      <div>
        <div className="swiperBox">
          <div className="searchBox">
            <div className="left">
              <span onClick={() => toCity()}>
                {localStorage.getItem("city") || "选择城市"}
              </span>
              <b>
                <DownFill />
              </b>
              <input type="text" placeholder="请输入搜索内容" />
            </div>

            <i className="iconfont icon-ditu" onClick={() => push("/map")}></i>
          </div>{" "}
          <Swiper autoplay loop className="swiper">
            {swipeImg.length > 0 &&
              swipeImg.map((v: Img, index: number) => {
                return (
                  <Swiper.Item key={v.id + index}>
                    <img src={"http://47.102.145.189:8009" + v.imgSrc} alt="" />
                  </Swiper.Item>
                );
              })}
          </Swiper>
        </div>{" "}
        <div className="btn">
          {content.map((v) => {
            return (
              <div
                className="btn-item"
                key={v.icon}
                onClick={() => toRoomList(v.title, v.path)}
              >
                <i className={"iconfont " + v?.icon}></i>
                <span>{v?.title}</span>
              </div>
            );
          })}
        </div>
        {/* 租房小组 */}
        <div className="groupBox">
          <h3>
            <span>租房小组</span>
            <span>更多</span>
          </h3>
          <div className="contentBox">
            {group.length > 0 &&
              group.map((res) => {
                return (
                  <dl key={res.id}>
                    <dd>
                      <span>{res.title}</span>
                      <span>{res.desc}</span>
                    </dd>
                    <dt
                      style={{
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center",
                      }}
                    >
                      <Image
                        placeholder={<Loading />}
                        lazy
                        src={"http://47.102.145.189:8009" + res.imgSrc}
                      />
                    </dt>
                  </dl>
                );
              })}
          </div>
        </div>
        <div className="newsBox">
          <h3>最新资讯</h3>
          <div className="contentBox">
            {news.length > 0 &&
              news.map((item: News) => {
                return (
                  <dl key={item.id}>
                    <dt>
                      <Image
                        placeholder={<Loading />}
                        lazy
                        style={{
                          width: "100%",
                          height: "100%",
                          display: "flex",
                          justifyContent: "center",
                          alignItems: "center",
                        }}
                        src={"http://47.102.145.189:8009" + item.imgSrc}
                      />
                    </dt>
                    <dd>
                      <p>{item.title}</p>
                      <p>
                        <span>{item.from}</span>
                        <span>{item.date}</span>
                      </p>
                    </dd>
                  </dl>
                );
              })}
          </div>
        </div>
      </div>{" "}
    </BeScroll>
  );
};
const mapStateToProps = (state: any) => {
  return state.home;
};
const mapDispatchToProps = (dispatch: any) => {
  return bindActionCreators(HomeAction, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(memo(Home));
